<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" import="java.sql.*,java.io.*,java.util.*"%>

<%
    String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Emp</title>
    <script type="text/javascript" src="<%=path%>/js/jquery-3.5.1.js"></script>
    <style>
        fieldset{
            background-color: #f1f1f1;
            border: none;
            border-radius: 2px;
            margin-bottom: 12px;
            overflow: hidden;
            padding: 0 .625em;
        }
        label{
            cursor: pointer;
            display: inline-block;
            padding: 3px 6px;
            text-align: right;
            width: 150px;

            vertical-align: top;
        }
        input{
            font-size: inherit;
        }
        table{
            width:600px;
            text-align:center;
        }
        table tr th,td{
            height:30px;
            line-height:30px;
            border:1px solid #ccc;
        }
        #pageStyle{
            display:inline-block;
            width:32px;
            height:32px;
            border:1px solid #CCC;
            line-height:32px;
            text-align:center;
            color:#999;
            margin-top:20px;
            text-decoration:none;
        }
        #pageStyle:hover{
            background-color:#CCC;
        }
        #pageStyle .active{
            background-color:#0CF;
            color:#ffffff;
        }
    </style>

</head>
<body>
<%
    //注册数据库驱动
    Class.forName("com.mysql.cj.jdbc.Driver");
//获取数据库连接
    Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/commany?useUnicode=true&characterEncoding=utf8&useSSL=true&autoReconnect=true&serverTimezone=UTC", "root", "19980316");
//创建statement
    Statement stmt = conn.createStatement();
//执行查询
    String sql = "select emp.empno,emp.ename,emp.job,emp.mgr,emp.hiredate,emp.sal,emp.comm,emp.deptno,dept.dname,dept.loc from emp,dept where emp.deptno=dept.deptno";
    ResultSet rs = stmt.executeQuery(sql);
%>

<table align="center">

    <thead>
         <tr>

        <th>
            <%
                out.print("empno");
            %>
        </th>
        <th>
            <%
                out.print("ename");
            %>
        </th>
             <th>
                 <%
                     out.print("job");
                 %>
             </th>
             <th>
                 <%
                     out.print("mgr");
                 %>
             </th>
             <th>
                 <%
                     out.print("hiredate");
                 %>
             </th>
             <th>
                 <%
                     out.print("sal");
                 %>
             </th>
        <th>
            <%
                out.print("comm");
            %>
        </th>
        <th>
            <%
                out.print("deptno");
            %>
        </th>
             <th>
                 <%
                     out.print("dneme");
                 %>
             </th>
             <th>
                 <%
                     out.print("loc");
                 %>
             </th>
    </tr>
    </thead>

    <%
        while (rs.next()) {
    %>
    <tbody>
    <tr>
        <td>
            <%
                out.print(rs.getString(1));
            %>
        </td>

        <td>
            <%
                out.print(rs.getString(2));
            %>
        </td>
        <td>
            <%
                out.print(rs.getString(3));
            %>
        </td>
        <td>
            <%
                out.print(rs.getString(4));
            %>
        </td>

        <td>
            <%
                out.print(rs.getString(5));
            %>
        </td>
        <td>
            <%
                out.print(rs.getString(6));
            %>
        </td>
        <td>
            <%
                out.print(rs.getString(7));
            %>
        </td>
        <td>
            <%
                out.print(rs.getString(8));
            %>
        </td>
        <td>
            <%
                out.print(rs.getString(9));
            %>
        </td>
        <td>
            <%
                out.print(rs.getString(10));
            %>
        </td>
    </tr>
    </tbody>
    <%
        }
    %>
</table>


<div>
    <ul>
        <form name="addEmp" >
            <li><label>增加数据</label></li>
            <li><label>empno:</label> <input type="text" name="empno"><br></li>
            <li> <label>ename:</label><input type="text" name="ename"><br></li>
            <li><label>job:</label><input type="text" name="job"><br></li>
            <li><label>mgr:</label><input type="text" name="mgr"><br></li>
            <li><label>hiredate:</label><input type="text" name="hiredate"><br></li>
            <li><label>sal:</label><input type="text" name="sal"><br></li>
            <li><label>comm:</label><input type="text" name="comm"><br></li>
            <li><label>deptno:</label><input type="text" name="deptno"><br></li>

            <label></label> <input type="button" value="提交" onclick="return add()"/>
        </form>
    </ul>
</div>

<div>
    <form name="delEmp">
        <li><label>所要删除的empno：</label><input type="text" name = "empno"></input></li>
        <label></label> <input type="button" value="提交" onclick="return del()"/>
    </form>
</div>

<div>
    <ul>
        <form name="updEmp" >
            <li><label>更改数据</label></li>
            <li><label>empno:</label> <input type="text" name="empno"><br></li>
            <li> <label>ename:</label><input type="text" name="ename"><br></li>
            <li><label>job:</label><input type="text" name="job"><br></li>
            <li><label>mgr:</label><input type="text" name="mgr"><br></li>
            <li><label>hiredate:</label><input type="text" name="hiredate"><br></li>
            <li><label>sal:</label><input type="text" name="sal"><br></li>
            <li><label>comm:</label><input type="text" name="comm"><br></li>
            <li><label>deptno:</label><input type="text" name="deptno"><br></li>

            <label></label> <input type="button" value="提交" onclick="return upd()"/>
        </form>
    </ul>
</div>

</body>
<script type="text/javascript">
    function add(){
        var empno = addEmp.empno.value;
        var ename= addEmp.ename.value;
        var job = addEmp.job.value;
        var mgr= addEmp.mgr.value;
        var hiredate = addEmp.hiredate.value;
        var sal = addEmp.sal.value;
        var comm = addEmp.comm.value;
        var deptno = addEmp.deptno.value;
        $(document).ready(function(){
            $.post("<%=path%>/Emp/add",
                {"empno":empno,"ename":ename,"job":job,"mgr":mgr,"hiredate":hiredate,"sal":sal,"comm":comm,"deptno":deptno},
                function(data){
                    if(data == true){
                        alert("新建成功");
                    }
                    if(data == false){
                        alert("新建失败");
                    }
                });
        });
    }
</script>
<script type="text/javascript">
    function del(){
        var empno = delEmp.empno.value;
        $(document).ready(function(){
            $.post("<%=path%>/Emp/del",
                {"empno":empno},
                function(temp){
                    if(data == true){
                        alert("删除成功");
                    }
                    if(data == false){
                        alert("删除失败");
                    }
                });
        });
    }
</script>
<script type="text/javascript">
    function upd(){
        var empno = updEmp.empno.value;
        var ename= updEmp.ename.value;
        var job = updEmp.job.value;
        var mgr= updEmp.mgr.value;
        var hiredate = updEmp.hiredate.value;
        var sal = updEmp.sal.value;
        var comm = updEmp.comm.value;
        var deptno = updEmp.deptno.value;
        $(document).ready(function(){
            $.post("<%=path%>/Emp/upd",
                {"empno":empno,"ename":ename,"job":job,"mgr":mgr,"hiredate":hiredate,"sal":sal,"comm":comm,"deptno":deptno},
                function(data){
                    if(data == true){
                        alert("新建成功");
                    }
                    if(data == false){
                        alert("新建失败");
                    }
                });
        });
    }
    $(function(){
        var $table = $('table');
        var currentPage = 0;//当前页默认值为0
        var pageSize = 4;//每一页显示的数目
        $table.bind('paging',function(){
            $table.find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+1)*pageSize).show();
        });
        var sumRows = $table.find('tbody tr').length;
        var sumPages = Math.ceil(sumRows/pageSize);//总页数

        var $pager = $('<div class="page"></div>');  //新建div，放入a标签,显示底部分页码
        for(var pageIndex = 0 ; pageIndex<sumPages ; pageIndex++){
            $('<a href="#" id="pageStyle" onclick="changCss(this)"><span>'+(pageIndex+1)+'</span></a>').bind("click",{"newPage":pageIndex},function(event){
                currentPage = event.data["newPage"];
                $table.trigger("paging");
                //触发分页函数
            }).appendTo($pager);
            $pager.append(" ");
        }
        $pager.insertAfter($table);
        $table.trigger("paging");

        //默认第一页的a标签效果
        var $pagess = $('#pageStyle');
        //$pagess[0].style.backgroundColor="#006B00";
        //$pagess[0].style.color="#ffffff";
    });

    //a链接点击变色，再点其他回复原色
    function changCss(obj){
        var arr = document.getElementsByTagName("a");
        for(var i=0;i<arr.length;i++){
            if(obj==arr[i]){       //当前页样式
                obj.style.backgroundColor="#006B00";
                obj.style.color="#ffffff";
            }
            else
            {
                arr[i].style.color="";
                arr[i].style.backgroundColor="";
            }
        }
    }
</script>
</html>
